<template>
  <div class="warp-header-title">简介</div>
  <div class="text-box">
    <p>瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，
      即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。</p>
  </div>
  <div class="warp-header-title">适用场景</div>
  <div class="text-box">
    <p>内容以图片为主的时候，瀑布流是更好的选择。图片占用空间比较大，并且大脑理解的速度相比理解文字要快，短时间内可以扫过的内容很多，所以如果用分页
      显示的话用户务必会频繁的翻页，影响沉浸式的体验，而瀑布流可以解决这个问题。</p>
  </div>
  <div class="warp-header-title">效果展示</div>
  <div class="warp-box">
    <div class="shell">
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0392c120009pldssxD443.jpg" alt="1(2).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0392k120009pldpif055D.jpg" alt="1(3).jpeg" referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0396t120009pldrot9269.jpg" alt="1(11).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0391j120009plds2150FA.jpg" alt="1(12).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03955120009plds2l0836.jpg" alt="1(1).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03918120009pldnzp5790.jpg" alt="1(5).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03956120009plduad65F2.jpg" alt="1(13).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03913120009pldq5e558F.jpg" alt="1(4).jpeg" referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0395d120009pldwib61BB.jpg" alt="1(15).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0394k120009pld2p150B1.jpg" alt="1(6).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0394q120009plda209B8F.jpg" alt="1(16).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03962120009pldxdkE284.jpg" alt="1(17).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0395g120009pldmkg5B84.jpg" alt="1(7).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03946120009pldiw7B8C4.jpg" alt="1(19).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03967120009pldu3628D9.jpg" alt="1(20).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03911120009pldmkjAB3B.jpg" alt="1(8).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03947120009pldrp6DB1F.jpg" alt="1(22).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0396o120009pldh5tD42B.jpg" alt="1(21).jpeg" referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0391f120009pld3gh762B.jpg" alt="1(9).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0395b120009plds3x9D78.jpg" alt="1(23).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03973120009pldktv22AF.jpg" alt="1(24).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0396k120009ple2j84F82.jpg" alt="1(25).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0396q120009pldzny489C.jpg" alt="1(26).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0396u120009ple173BB9C.jpg" alt="1(10).jpeg" referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0390c120009pldq6hCF5E.jpg" alt="1(27).jpeg" referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0394l120009ple0n58E32.jpg" alt="1(28).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03961120009pldyqaBA9A.jpg" alt="1(29).jpeg"  referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/03930120009pldwkoDF0D.jpg" alt="1(30).jpeg" referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0391k120009ple17d5DAE.jpg" alt="1(14).jpeg" referrerpolicy="no-referrer" />
      </div>
      <div class="image">
        <img src="https://dimg04.c-ctrip.com/images/0395z120009pldcryCAE1.jpg" alt="1(18).jpeg" referrerpolicy="no-referrer" />
      </div>

    </div>
  </div>
  <div class="warp-header-title">代码示例</div>
  <div class="text-box">
    <p>只需要较少的代码即可实现这个功能。</p>
  </div>
  <div class="code-box">
    <codeblock :code="code"></codeblock>
  </div>
  <div class="warp-header-title">代码分析</div>
  <div class="text-box">
    <p><b>column-count </b>: 指定某个元素应分为的列数，column-count使shell的内容分为了一定数量的列数，当然这个数量可以通过媒体查询器根据不同的窗口做适配</p>
    <p><b>column-gap</b> :  指定列之间的间隙，这个比较好理解，就是列与列之间的间隙。</p>
  </div>
</template>

<script>
export default {
  name: "2011",
  data(){
    return{
      code:'<div class="shell">\n' +
          '  <div class="image">\n' +
          '        <img src="xxxxxx.jpg" />\n' +
          '   </div>\n' +
          '  <div class="image">\n' +
          '        <img src="xxxxxx.jpg" />\n' +
          '   </div>\n' +
          '  <div class="image">\n' +
          '        <img src="xxxxxx.jpg" />\n' +
          '   </div>\n' +
          '  <div class="image">\n' +
          '        <img src="xxxxxx.jpg" />\n' +
          '   </div>\n' +
          '</div>\n' +
          '\n'+
          '.shell{ \n' +
          '  column-count: 5;\n' +
          '  column-gap: 15px;\n' +
          '}\n' +
          '.image{\n' +
          '  margin-bottom: 15px;\n' +
          '}\n' +
          '.image img{\n' +
          '  width: 100%;\n' +
          '}'
    }
  }
}
</script>

<style scoped>
.warp-header-title {
  width: 200px;
  height: 45px;
  border-left: 4px #2296ee solid;
  margin: 10px 5px;
  background-color: #eff4f8;
  font-size: 16px;
  line-height: 45px;
  font-weight: bold;
  padding-left: 10px;
}

.text-box {
  width: 98%;
  margin: 10px 1%;
}

.warp-box {
  width: 98%;
  min-height: 400px;
  margin: 10px 1%;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 #afafaf;
  padding:5px;
}
.code-box{
  padding: 5px;
}
</style>
<style>

.shell{
  column-count: 5;
  column-gap: 15px;
}
.image{
  margin-bottom: 15px;
}
.image img{
  width: 100%;
}
@media (max-width:1200px){
  .shell{
    column-count: 4;
  }
}
@media (max-width:850px){
  .shell{
    column-count: 3;
  }
}
@media (max-width:600px){
  .shell{
    column-count: 2;
  }
}
</style>